<script setup lang="ts">
    import { useNoticeStore } from '@/stores/notice';
    import { NoticeEnum } from '@/enums';
    
    import NoticeHeader from '@/components/NoticeBox/Header/index.vue'; 
    import NoticeContent from '@/components/NoticeBox/Content/index.vue';

    const noticeStore = useNoticeStore();

    /**
     * 显示事件
     */
    const handleShow = () => {
        // 打开通知提醒框
        noticeStore.isOpenNoticeBox = true;
        // 清除通知提醒未读消息数
        noticeStore.cleaUnread();
        // 获取通知提醒列表
        noticeStore.getNoticePage(NoticeEnum.ALL, true);
    }

    /**
     * 隐藏事件
     */
    const handleHide = () => {
        // 关闭通知提醒框
        noticeStore.isOpenNoticeBox = false;
    }

</script>
<template>
    <el-popover 
        placement="bottom" 
        trigger="click" 
        :teleported="false"
        :show-arrow="false"
        :width="290"
        ref="popover"
        @show="handleShow"
        @hide="handleHide"
    >
        <div class="notice_box">
            <!-- 通知头部 -->
            <notice-header ref="noticeHeaderRef" />
            <!-- 通知主体 -->
            <notice-content />
        </div>
        <template #reference>
            <slot></slot>
        </template>
    </el-popover>
</template>
<style scoped>

    .notice_box {
        width: 290px;
        display: flex;
        flex-direction: column;
    }

</style>